<template>
    <el-config-provider size="small">
        <div class="filow-view box-full flex-col">
            <div class="header-wrapper flex-col-fixed">
                <div class="row">
                    <div class="dir-box flex-row">
                        <el-select
                            placeholder="请选择目录项"
                            v-model="that.dirItem.value"
                            class="w-num-400 flex-row-fixed"
                            @change="(val:string) => that.dirItemChange(val)"
                        >
                            <el-option v-for="item of that.dirItemList.value" :key="item.id" :label="item.name" :value="item.path">
                                <div class="flex-row-between flex-row-center h-num-32">
                                    <span>{{ item.name }}</span>
                                    <span class="flex-row-center">
                                        <el-icon @click.stop="that.dirItemDialog.saveDialogToggle(true, item)"><edit /></el-icon>
                                        <el-icon class="m-l-8" @click.stop="that.dirItemDelete(item)"><delete /></el-icon>
                                    </span>
                                </div>
                            </el-option>
                        </el-select>
                        <el-cascader
                            clearable
                            filterable
                            placeholder="请选择目录分类"
                            class="m-l-8 flex-row-auto"
                            v-model="that.dirCasc.value"
                            :options="that.dirCascList.value"
                            :props="{ value: 'path', label: 'dirname', children: 'child', checkStrictly: true, expandTrigger: 'hover', emitPath: false }"
                            @change="(val: string) => that.dirCascChange(val)"
                        >
                            <template v-slot="{ data }">
                                <div @click="that.selectDirCasc(data.path)">{{ data.dirname }}</div>
                            </template>
                        </el-cascader>
                    </div>
                </div>

                <div class="row flex-row">
                    <div class="flex-row flex-row-auto">
                        <el-checkbox-group v-model="that.fileTypeCheck.value">
                            <el-checkbox-button v-for="item of that.fileType" :label="item.name" :key="item.name">{{ item.title }}</el-checkbox-button>
                        </el-checkbox-group>
                        <div class="m-l-8">
                            <el-button type="primary" @click="that.dirItemDialog.saveDialogToggle(true)">添加目录项</el-button>
                        </div>

                        <el-dropdown class="m-l-8" trigger="click" @command="(v: any) => that.dirOperateCommand(v)">
                            <el-button type="success">
                                <span>目录操作</span>
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="openDir">打开目录</el-dropdown-item>
                                    <el-dropdown-item command="createDir">新建目录</el-dropdown-item>
                                    <el-dropdown-item command="transferDir">转移目录</el-dropdown-item>
                                    <el-dropdown-item command="deleteDir">删除目录</el-dropdown-item>
                                    <el-dropdown-item command="renameDir">重命名目录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                        <el-dropdown class="m-l-8" trigger="click" @command="(v: any) => that.fileOperateCommand(v)">
                            <el-button type="success">
                                <span>文件操作</span>
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="uploadFile">上传文件</el-dropdown-item>
                                    <el-dropdown-item command="transferFile">转移文件</el-dropdown-item>
                                    <el-dropdown-item command="deleteFile">删除文件</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                        <span class="tips">{{ that.tips.value }}</span>
                    </div>

                    <div class="flex-row-fixed w-num-400 flex-row-center-right">
                        <el-button class="m-r-24" text="plain" icon="refresh" @click.stop="that.syncFiles()">同步资源</el-button>
                        <el-checkbox v-model="that.deepFiles.value">深度文件</el-checkbox>
                        <el-checkbox v-model="that.summaryMode.value">简介模式</el-checkbox>
                        <el-checkbox v-model="that.operateMode.value">操作模式</el-checkbox>
                    </div>
                </div>
            </div>

            <div class="main-wrapper flex-col-auto">
                <div class="collapse-item" :key="fileTypeItem.name" v-for="fileTypeItem of that.fileType" v-show="that.fileTypeCheck.value.includes(fileTypeItem.name)">
                    <!-- 图片 -->
                    <div class="image-collapse" v-if="fileTypeItem.name === 'image'">
                        <div :class="['image-item', `image-item-${index}`]" :key="index" v-for="(img, index) of that.fileList.category.image">
                            <el-image :src="img.path" fit="cover" :lazy="true" @click.stop="that.viewImage(index)" />
                        </div>
                    </div>
                    <!-- 视频 -->
                    <div class="video-collapse" v-if="fileTypeItem.name === 'video'">
                        <el-checkbox-group v-model="that.selectFiles.video">
                            <div class="video-item" :key="video.path" v-for="video of that.fileList.category.video">
                                <lv-player :src="video.path" :loop="true" player="vplayer" />
                                <div class="operate-box" v-if="that.operateMode.value">
                                    <el-checkbox :label="video.path">选择</el-checkbox>
                                    <div class="open" @click="that.openFile(video)">打开</div>
                                </div>
                                <div class="summary-box" v-if="that.summaryMode.value">
                                    <div class="filename">{{ video.filename }}</div>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
                <el-empty description="暂无资源文件" v-show="that.isEmptyFiles.value" />
            </div>

            <!-- 所有对话框 -->
            <div class="dialog-wrapper">
                <lv-dialog
                    mode="confirm"
                    title="保存目录项"
                    v-model:visible="that.dirItemDialog.saveDialogVisible.value"
                    @close="that.dirItemDialog.close"
                    @confirm="that.dirItemDialog.saveFormData"
                >
                    <el-form label-width="60px" :model="that.dirItemDialog.formData" :rules="that.dirItemDialog.formRule" :ref="that.dirItemDialog.formRefKey">
                        <el-form-item prop="name" label="名称">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.dirItemDialog.formData.name" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="path" label="路径">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.dirItemDialog.formData.path" />
                                <el-button icon="more" class="flex-row-fixed m-l-8" @click="that.dirItemDialog.openSelectDirDialog" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="新建目录"
                    v-model:visible="that.createDirDialog.visible.value"
                    @close="that.createDirDialog.close"
                    @confirm="that.createDirDialog.save"
                >
                    <el-form label-width="80px" :model="that.createDirDialog.formData" :rules="that.createDirDialog.formRule" :ref="that.createDirDialog.formRefKey">
                        <el-form-item prop="currentPath" label="路径">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" :readonly="true" v-model="that.createDirDialog.formData.currentPath" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="dirName" label="目录名">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.createDirDialog.formData.dirName" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="转移目录"
                    v-model:visible="that.transferDirDialog.visible.value"
                    @close="that.transferDirDialog.close"
                    @confirm="that.transferDirDialog.save"
                >
                    <el-form
                        label-width="100px"
                        :model="that.transferDirDialog.formData"
                        :rules="that.transferDirDialog.formRule"
                        :ref="that.transferDirDialog.formRefKey"
                    >
                        <el-form-item prop="from" label="源地址">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" :readonly="true" v-model="that.transferDirDialog.formData.from" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="to" label="目标地址">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.transferDirDialog.formData.to" />
                                <el-button icon="more" class="flex-row-fixed m-l-8" @click="that.transferDirDialog.openSelectDirDialog" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="重命名目录"
                    v-model:visible="that.renameDirDialog.visible.value"
                    @close="that.renameDirDialog.close"
                    @confirm="that.renameDirDialog.save"
                >
                    <el-form label-width="100px" :model="that.renameDirDialog.formData" :rules="that.renameDirDialog.formRule" :ref="that.renameDirDialog.formRefKey">
                        <el-form-item prop="currentPath" label="地址">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" :readonly="true" v-model="that.renameDirDialog.formData.currentPath" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="oldName" label="旧目录名">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" :readonly="true" v-model="that.renameDirDialog.formData.oldName" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="newName" label="新目录名">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.renameDirDialog.formData.newName" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>

                <lv-dialog
                    mode="confirm"
                    title="转移文件"
                    v-model:visible="that.transferFileDialog.visible.value"
                    @close="that.transferFileDialog.close"
                    @confirm="that.transferFileDialog.save"
                >
                    <el-form
                        label-width="100px"
                        :model="that.transferFileDialog.formData"
                        :rules="that.transferFileDialog.formRule"
                        :ref="that.transferFileDialog.formRefKey"
                    >
                        <el-form-item prop="from" label="源地址">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" :readonly="true" v-model="that.transferFileDialog.formData.from" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="to" label="目标地址">
                            <div class="flex-row">
                                <lv-input class="flex-row-auto" v-model="that.transferFileDialog.formData.to" />
                                <el-button icon="more" class="flex-row-fixed m-l-8" @click="that.transferFileDialog.openSelectDirDialog" />
                            </div>
                        </el-form-item>
                    </el-form>
                </lv-dialog>
            </div>
        </div>
    </el-config-provider>
</template>

<script lang="ts">
import defineComponent from './mixins';
export default defineComponent;
</script>
